{% extends "data_opform.html" %}
{% load i18n %}
{% block form %}
{% autoescape off %}
    <tr>
		{{form.approve_type|field_as_td_h}}
		<td>{{form.approve_type.errors }}</td>
	</tr>
    <tr class="displayN">
		{{form.approvers|field_as_td_h}}
		<td>{{form.approvers.errors }}</td>
	</tr>
    <tr class="displayN">
		{{form.notifies|field_as_td_h}}
		<td>{{form.notifies.errors }}</td>
	</tr>
    <tr>
        <th><label for="id_approver">{% trans 'Approver' %}:</label></th>
        <td>
            <div class="approve-container">
                <div class="l" id="id-approvers"></div>
                <div class="l" style="margin: 5px;" id="add-approver" title="{% trans 'Click to add approver' %}">
                    <a href="javascript:void(0);">
                        <img src="{{ MEDIA_URL }}/images/abroad_att/approve-add.png" alt="">
                    </a>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <th><label for="id_notify">{% trans 'Notify' %}:</label></th>
        <td>
            <div class="notify-container">
                <div class="l" id="id-notify"></div>
                <div class="l" style="margin: 5px;" id="add-notify" title="{% trans 'Click to add Notify' %}">
                    <a href="javascript:void(0);">
                        <img src="{{ MEDIA_URL }}/images/abroad_att/approve-add.png" alt="">
                    </a>
                </div>
            </div>
        </td>
    </tr>
    {% for i,k in form.errors.items %}
        {{i}}{{k}}
    {% endfor %}
{% endautoescape %}
{% endblock %}
{% block addjs %}
    var max_level = 1;
    function data_init(){
        var val = $("#id_approvers").val();
        if(val){
            var approvers = val.split(',');
            for(var i=0; i < approvers.length; i++){
                var approver = approvers[i];
                var attrs = approver.split('|');
                generate_level($('#id-approvers'), 'approver', attrs[0], attrs[1], attrs[2], attrs[3]);
            }
        }
        var val = $("#id_notifies").val();
        if(val){
            var notifies = val.split(',');
            for(var i=0; i < notifies.length; i++){
                var notify = notifies[i];
                var attrs = notify.split('|');
                generate_level($('#id-notify'), 'notify', attrs[0], attrs[1], attrs[2], 1);
            }
        }
    }
    data_init();
    function refresh_data(container, userType){
        var current_level = 1;
        var last_level = '';
        $(container).find('input[name="'+userType+'"]').each(function(){
            var uid = $(this).val().split('|')[0];
            var level = $(this).val().split('|')[1];
            if(!last_level){
                last_level = level;
            }
            if(level != last_level){
                current_level += 1;
            }
            var new_val = uid + '|' + current_level;
            $(this).val(new_val)
        });
    };
    function approver_valid(container, userType, data){
        var approvers = [];
        $(container).find('input[name="'+userType+'"]').each(function(){
            approvers.push($(this).val());
        });
        for(var i=0; i < approvers.length; i++){
            var obj = approvers[i];
            if(data == obj){
                return false;
            }
        }
        return true;
    }
    function refresh_event(container, userType){
        $(container).find('div.flow-img').unbind().click(function(){
            var parent = $(this).parent();
            if($(this).prev().length){
                $(this).prev().remove();
            }else{
                $(this).next().remove();
            }
            $(this).remove();
            if(!$(parent).find('div.flow-img').get(0)){
                if($(parent).prev().length){
                    $(parent).prev().remove();
                }else{
                    $(parent).next().remove();
                }
                $(parent).remove();
                max_level = max_level - 1;
                console.log(this)
                console.log('Level Reduce...........')
                refresh_data(container, userType);
            }
        });
    }
    function generate_level(container, userType, userid, pin, firstname, level){
        var level_item = ''
            +'<div class="flow-img l" name="flow-item" title="'+pin+' '+firstname+'">'
            +'    <div><input name="'+userType+'" type="hidden" value="'+userid+'|'+level+'"></div>'
            +'    <div style=""><img onerror="this.src=\'/media/images/userImage.gif\'" source="/data_store/emp_pic/'+pin+'.jpg" src="/data_store/emp_pic/'+pin+'.jpg"></div>'
            +'    <div>'+pin+'</div>'
            +'    <div style="max-width: 100px; overflow:hidden;text-overflow:ellipsis;" >'+firstname+'</div>'
            +'</div>';
        var same_level = '<div class="flow-level-equative l"></div>'
        var next_level = '<div class="flow-level-arrow l"></div>'
        var level_div = $(container).find('#flow-level-'+level).get(0);
        if(level_div){
            $(level_div).append(same_level);
            $(level_div).append(level_item);
            refresh_event(container);
            return true;
        }else{
            var content = ''
                +'<div class="flow-level l" id="flow-level-'+level+'">'
                +   level_item
                +'</div>';
            if(level > 1){
                content = next_level + content;
            }
            if(userType == "approver"){
                max_level = max_level + 1;
            }
            $(container).append(content)
            refresh_event(container);
        }
    }
    $("#add-approver").click(function(){
        $.ajax({
            url: '/personnel/department_approver/',
            data: {level: max_level},
            type: 'GET',
            dataType: 'html',
            success: function(html){
                var options = {
                    title: gettext("Approver"),
                    skin: 'action-dialog',
                    scrollbar: true,
                    maxmin: true,
                    zIndex: 100,
                    area: ['auto', 'auto'],
                    btn: [gettext('确定'), gettext('取消')],
                    yes: function(index, layero){
                        var click_row = $(layero).find('tr.select_row_style').get(0);
                        if(!click_row){
                            alert('Please select employee.')
                            return false;
                        }
                        var approve_level = $("#id_approve_level").val();
                        if(!approve_level){
                            alert('Please select level.')
                            return false;
                        }
                        var userid = $(click_row).attr('data');
                        var pin = $(click_row).find('td').get(1).title;
                        var firstname = $(click_row).find('td').get(2).title;
                        var data = userid + '|' + approve_level;
                        //if(!approver_valid($("#id-approvers"), 'approver', data)){
                        //    alert('Employee '+pin+' '+firstname+' already assign please remove first.');
                        //    return false;
                        //}
                        if(approver_valid($("#id-approvers"), 'approver', data)){
                            generate_level($("#id-approvers"), 'approver', userid, pin, firstname, approve_level);
                        }
                        layer.close(index);
                    },
                    cancel: function(index){
                        layer.close(index);
                    }
                }
                $(html).layerDialog(options);
            }
        });
    });
    function add_notify(userid, pin, firstname){

    };
    $("#add-notify").click(function(){
        $.ajax({
            url: '/personnel/department_notify/',
            type: 'GET',
            dataType: 'html',
            success: function(html){
                var options = {
                    title: gettext("Notify"),
                    skin: 'action-dialog',
                    scrollbar: true,
                    maxmin: true,
                    zIndex: 100,
                    area: ['auto', 'auto'],
                    btn: [gettext('确定'), gettext('取消')],
                    success: function(layero, index){
                        $(layero).find(".select_AllInDept").remove();
                    },
                    yes: function(index, layero){
                        var ret = [];
                        $(layero).find("#id_store_select_emp tr").each(function(){
                            var checkbox = $(this).find('td.class_select_col input.select_row');
							if($(checkbox).attr("checked"))
							{
                                var userid = $(this).attr('data');
                                var pin = $(this).find('td').get(1).title;
                                var firstname = $(this).find('td').get(2).title;
                                var data = userid + '|1';
                                if(approver_valid($("#id-notify"), 'notify', data)){
                                    generate_level($("#id-notify"), 'notify', userid, pin, firstname, 1);
                                }
								ret.push($(this).val());
							}
						});
                        if(!ret){
                            alert('Please select employee.')
                            return false;
                        }
                        layer.close(index);
                    },
                    cancel: function(index){
                        layer.close(index);
                    }
                }
                $(html).layerDialog(options);
            }
        });
    });
{% endblock %}